<template>
    <div id="app">
        <div class="min-h-screen bg-gradient-to-br from-blue-900 to-indigo-900 flex items-center justify-center p-4">
            <div class="w-full max-w-md">
                <!-- 登录/注册卡片 -->
                <div
                    class="bg-white rounded-xl shadow-2xl overflow-hidden transform transition-all duration-500 hover:shadow-4xl mydemo1">
                    <!-- 卡片头部 -->
                    <div class="p-6 bg-gradient-to-r from-blue-600 to-indigo-600 text-white">
                        <h2 class="text-2xl font-bold mb-2">{{ formType === 'login' ? '用户登录' : '用户注册' }}</h2>
                        <p class="text-blue-100">{{ formType === 'login' ? '欢迎回来，请登录您的账户' : '创建新账户，开启新体验' }}</p>
                    </div>

                    <!-- 表单 -->
                    <form @submit.prevent="submitForm" class="p-6 space-y-4">
                        <!-- 用户名 -->
                        <div class="space-y-2">
                            <label for="username" class="block text-sm font-medium text-gray-700">用户名</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-user text-gray-400"></i>
                                </div>
                                <input type="text" id="username" v-model="form.username"
                                    class="pl-10 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 transition-all"
                                    placeholder="请输入用户名">
                            </div>
                            <p v-if="errors.username" class="text-red-500 text-xs italic">{{ errors.username }}</p>
                        </div>

                        <!-- 密码 -->
                        <div class="space-y-2">
                            <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-lock text-gray-400"></i>
                                </div>
                                <input :type="showPassword ? 'text' : 'password'" id="password" v-model="form.password"
                                    class="pl-10 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 transition-all"
                                    placeholder="请输入密码">
                                <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
                                    <button type="button" @click="togglePasswordVisibility"
                                        class="text-gray-400 hover:text-gray-600 focus:outline-none">
                                        <i :class="showPassword ? 'fa fa-eye-slash' : 'fa fa-eye'"></i>
                                    </button>
                                </div>
                            </div>
                            <p v-if="errors.password" class="text-red-500 text-xs italic">{{ errors.password }}</p>
                        </div>

                        <!-- 注册额外字段 -->
                        <div v-if="formType === 'register'" class="space-y-2">
                            <label for="email" class="block text-sm font-medium text-gray-700">邮箱</label>
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                    <i class="fa fa-envelope text-gray-400"></i>
                                </div>
                                <input type="email" id="email" v-model="form.email"
                                    class="pl-10 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 transition-all"
                                    placeholder="请输入邮箱">
                            </div>
                            <p v-if="errors.email" class="text-red-500 text-xs italic">{{ errors.email }}</p>
                        </div>

                        <!-- 提交按钮 -->
                        <button type="submit"
                            class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition-all duration-300 transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            {{ formType === 'login' ? '登录' : '注册' }}
                        </button>

                        <!-- 切换表单类型 -->
                        <p class="text-center text-sm text-gray-600">
                            {{ formType === 'login' ? '还没有账户？' : '已有账户？' }}
                            <button type="button" @click="toggleFormType"
                                class="text-indigo-600 hover:text-indigo-900 font-medium transition-colors">
                                {{ formType === 'login' ? '立即注册' : '返回登录' }}
                            </button>
                        </p>
                    </form>
                </div>

            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const formType = ref('login');
const form = ref({
    username: '',
    password: '',
    email: ''
});
const errors = ref({
    username: '',
    password: '',
    email: ''
});
const showPassword = ref(false);
const showLogin = ref(true);

onMounted(() => {
    showLogin.value = sessionStorage.getItem('showLogin') !== '0';
    console.log('this.showLogin', showLogin.value);
    console.log('router:', router.currentRoute.value.path);

    nextTick(() => {
        setTimeout(() => {
            const tag1 = sessionStorage.getItem('showLogin');
            console.log('tag1:', tag1);

            if (router.currentRoute.value.path === '/' || router.currentRoute.value.path === '/LoginDoubao') {
                showLogin.value = true;
                sessionStorage.setItem('showLogin', '1');
            }
            if (!showLogin.value) {
                router.push('/DataBind');
            }
        });
    });
});

const toggleFormType = () => {
    formType.value = formType.value === 'login' ? 'register' : 'login';
    resetForm();
};

const togglePasswordVisibility = () => {
    showPassword.value = !showPassword.value;
};


let testFunc = (test = '这也是一个测试函数') => {
    console.log(test);
}


const resetForm = () => {
    form.value.username = '';
    form.value.password = '';
    form.value.email = '';

    Object.keys(errors.value).forEach(key => {
        errors.value[key] = '';
    });
};

const validateForm = () => {
    let isValid = true;

    // 清空之前的错误
    Object.keys(errors.value).forEach(key => {
        errors.value[key] = '';
    });

    // 验证用户名
    if (!form.value.username.trim()) {
        errors.value.username = '用户名不能为空';
        isValid = false;
    }

    // 验证密码
    if (!form.value.password) {
        errors.value.password = '密码不能为空';
        isValid = false;
    } else if (form.value.password.length < 6) {
        errors.value.password = '密码长度不能少于6位';
        isValid = false;
    }

    // 如果是注册表单，验证邮箱
    if (formType.value === 'register') {
        if (!form.value.email) {
            errors.value.email = '邮箱不能为空';
            isValid = false;
        } else if (!/\S+@\S+\.\S+/.test(form.value.email)) {
            errors.value.email = '请输入有效的邮箱地址';
            isValid = false;
        }
    }

    return isValid;
};

const submitForm = () => {
    testFunc("hello world");
    if (!validateForm()) return;

    // 模拟API调用
    const apiEndpoint = formType.value === 'login' ? '/api/login' : '/api/register';

    console.log(`正在提交${formType.value === 'login' ? '登录' : '注册'}请求到:`, apiEndpoint);
    console.log('表单数据:', {
        username: form.value.username,
        password: form.value.password,
        ...(formType.value === 'register' ? { email: form.value.email } : {})
    });

    // 模拟API响应延迟
    setTimeout(() => {
        // 模拟成功
        const success = true;

        if (success) {
            // 保存登录状态
            sessionStorage.setItem('showLogin', '0');
            sessionStorage.setItem('user', JSON.stringify({
                username: form.value.username,
                role: 'user'
            }));
            showLogin.value = false;

            // 导航到首页或其他页面
            router.push('/DataBind');
        } else {
            // 显示错误信息
            if (formType.value === 'login') {
                errors.value.username = '用户名或密码不正确';
            } else {
                errors.value.username = '注册失败，请稍后再试';
            }
        }
    }, 1000);
};
</script>

<style scoped>
/* 引入字体图标 */
@import url('https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css');

/* 全局样式 */
body {
    font-family: 'Inter', system-ui, sans-serif;
}

/* 动画效果 */
button {
    transition: all 0.3s ease;
}

input {
    transition: all 0.2s ease;
    margin-bottom: 0;
}

.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
}

.mydemo1 {
    width: 25%;
    background-color: rgb(241, 241, 241);
}

.max-w-md {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding-top: 200px;
}

/* .p-4{
    background-color: rgb(211, 250, 255);
  } */
#app {
    width: 99vw;
    height: 98vh;
    background-color: rgb(211, 250, 255);
}

.space-y-2 {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.relative {
    display: flex;
}

.pointer-events-none {
    margin: 0 13px 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.italic {
    color: red;
    font-size: 12px;
    margin-left: 5px;
}

.a {
    display: flex;
    /* flex-flow: column wrap; */
    flex-direction: row;
    /* justify-content: space-evenly; */
    align-items: center;
    /* flex-wrap: wrap; */
    width: 97vw;
    height: 500px;
    background-color: antiquewhite;
}

.a1 {
    width: 50px;
    /* height: 20px; */
    background-color: red;
    margin: 30px;
    color: #fff
}

.a2 {
    width: 20px;
    /* height: 40px; */
    background-color: red;
    margin: 30px;
    color: #fff
}
</style>